<script lang="ts" setup>
import type { Dict } from '@croco/framework/types';

import { onBeforeMount, reactive, ref } from 'vue';

import { Page } from '@croco/framework/libraries';

import { getDictTrim } from '#/api';
import { service } from '#/api/request';
import { DataTable } from '#/components/data-table';

import { useTable } from './data';

defineOptions({ name: 'MonitorOnline' });

const dataTableRef = ref<InstanceType<typeof DataTable>>();
const enums = reactive<{
    status: Array<Dict> | undefined;
}>({
    status: undefined,
});

const columns = useTable(({ code, scope }) => {
    switch (code) {
        case 'remove': {
            onDelete([scope.row]);
            break;
        }
        default: {
            break;
        }
    }
});

// 删除
function onDelete(rows: { username: string }[]) {
    const users = rows.map((item) => item.username);
    service.confirm({
        message: `确定对所选用户进行${users.length === 1 ? '强退' : '批量强退'}操作?`,
        url: '/online',
        data: { username: users },
        success: dataTableRef.value?.refresh,
    });
}

onBeforeMount(() => {
    getDictTrim('sys_exp_time').then((rs) => {
        enums.status = rs[0] ?? [];
    });
});
</script>
<template>
    <Page auto-content-height>
        <DataTable ref="dataTableRef" :columns="columns" primary-key="userId" api="/online" selection select-on-row-click>
            <template #extra="{ selections }">
                <el-button v-auth="'monitor:online:forceLogout'" @click="onDelete(selections)" :disabled="selections.length <= 0" type="danger" />
            </template>
            <template #expireTime="{ form }">
                <el-select v-model="form.expireTime" :empty-values="[null, undefined]">
                    <el-option label="全部" value="" />
                    <el-option v-for="(item, index) in enums.status" :key="index" :label="item.label" :value="item.value" />
                </el-select>
            </template>
        </DataTable>
    </Page>
</template>
